<template>
  <div class="problem-detail">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="题目描述" name="description">
        <problem-description :problem="problem" />
      </el-tab-pane>
      
      <el-tab-pane label="提交历史" name="submissions">
        <submission-history :problem="problemId" />
      </el-tab-pane>
    </el-tabs>

    <div class="problem-header">
      <h1>{{ problem?.title }}</h1>
      <el-button
        :type="isFavorite ? 'warning' : 'primary'"
        :loading="favoriteLoading"
        @click="handleToggleFavorite"
      >
        {{ isFavorite ? '取消收藏' : '收藏题目' }}
      </el-button>
    </div>

    <div class="code-section">
      <code-editor
        :problem-id="problemId"
        @submission-created="handleSubmissionCreated"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import CodeEditor from '../components/CodeEditor.vue'
import ProblemDescription from '../components/ProblemDescription.vue'
import SubmissionHistory from '../components/SubmissionHistory.vue'
import type { SubmissionResult } from '../api/code'
import problemApi from '../api/problem'
import { getProblemDetail } from '@/api/problem'
import { addFavorite, removeFavorite, listFavorites } from '@/api/favorite'

const route = useRoute()
const problemId = Number(route.params.id)
const activeTab = ref('description')

const problem = ref<ProblemDetail | null>(null)
const loading = ref(false)
const isFavorite = ref(false)
const favoriteLoading = ref(false)

// 检查是否已收藏
const checkFavoriteStatus = async () => {
  try {
    const favorites = await listFavorites()
    isFavorite.value = favorites.some(fav => fav.problem_id === problemId)
  } catch (error) {
    console.error('获取收藏状态失败:', error)
  }
}

// 获取题目详情
const fetchProblem = async () => {
  loading.value = true
  try {
    const response = await problemApi.getProblemDetail(problemId)
    problem.value = response.data
    await checkFavoriteStatus()
  } catch (error) {
    ElMessage.error('获取题目详情失败')
  } finally {
    loading.value = false
  }
}

// 处理新的提交
const handleSubmissionCreated = (submission: SubmissionResult) => {
  // 切换到提交历史标签页
  activeTab.value = 'submissions'
}

const handleToggleFavorite = async () => {
  if (favoriteLoading.value) return
  
  favoriteLoading.value = true
  try {
    if (isFavorite.value) {
      await removeFavorite(problemId)
      ElMessage.success('取消收藏成功')
      isFavorite.value = false
    } else {
      await addFavorite(problemId)
      ElMessage.success('收藏成功')
      isFavorite.value = true
    }
  } catch (error) {
    ElMessage.error(isFavorite.value ? '取消收藏失败' : '收藏失败')
  } finally {
    favoriteLoading.value = false
  }
}

onMounted(() => {
  fetchProblem()
})
</script>

<style scoped>
.problem-detail {
  display: flex;
  gap: 24px;
  padding: 24px;
  max-width: 1600px;
  margin: 0 auto;
  height: calc(100vh - 72px);
}

.problem-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.problem-title {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 600;
}

.problem-info {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.submission-rate {
  color: #666;
}

.section {
  margin-top: 24px;
}

.section h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
}

.example {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
}

.example-input,
.example-output,
.example-explanation {
  margin-bottom: 12px;
}

.label {
  font-weight: 500;
  margin-bottom: 4px;
}

pre {
  background: #f1f3f5;
  padding: 12px;
  border-radius: 4px;
  margin: 0;
}

code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.code-section {
  width: 50%;
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.toolbar {
  padding: 16px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.language-select {
  width: 120px;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

.code-editor {
  flex: 1;
  overflow: hidden;
}

.result-section {
  border-top: 1px solid #eee;
  overflow-y: auto;
  max-height: 40%;
}

.problem-header {
  margin-bottom: 24px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .problem-detail {
    flex-direction: column;
    height: auto;
  }

  .code-section {
    width: 100%;
    height: 600px;
  }
}
</style>
